<template>
  <div class="container">
    <van-sticky>
      <THeader v-if="Sub == true" title="口令点名">
        <template v-slot:icon id="studentList">
          <span style="font-size: 4.5vw" @click="handleSubButtonClick()">提交</span>
        </template>
      </THeader>
      <THeader v-else title="口令点名"></THeader>
    </van-sticky>

    <div class="content">
      <div class="card" id="codeCard">
        <div class="card-header">
          <p style="padding-left: 5px;">随机口令</p>
        </div>
        <div class="card-content cardBody">
          <div id="password" style="height: 10vw">{{password}}</div>
          <div class="content-padded" style="padding-top: 6vw">
            <p id="number" style="font-size: 5vw;">已签到人数:<span style="font-size: 7vw;padding: 1vw;">{{ count }}</span>人</p>
          </div>
        </div>
        <div>
          <div class="card-footer cardFooter" style="  justify-content: center; ">
            <div class="card-link" style="color: #2b95ef;" @click="stopRollCall">停止点名</div>
          </div>
        </div>
      </div>

      <div id="studentList">
        <van-tabs v-model="active" swipeable>
          <van-tab v-for="(item,inde) in studentList"  :title=item.name :key="inde">
            <van-cell-group  inset v-for="(value, index) in item.stuList" :key="index" style="margin: 3%; border-radius: 15px;" :class="{'slideOut': item.slideOut[index]}">
              <van-cell class="student">
                <div class="text">
                  <span v-if="item.sgin[index] === false" style="background-color: #2b93ed;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                  <span v-else-if="item.leaved[index] === false" style="background-color: #fac121;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                  <span v-else-if="item.absent[index] === false" style="background-color: #c55350;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                  <span v-else style="background-color: #fdfdfe;width: 1.5vw; height: 27vw; margin-right: 3vw;" />
                  <div class="img" @click="handClick('签到',index,inde)">
                    <van-image v-if="value.photo === 1"
                               :src="eduUrl+'/jwfilepath/StudentPhotos/' + value.stuID % 100 + '/' + value.stuID + '.jpg'"
                    />
                    <van-image v-else
                               :src="eduUrl+'/jwfilepath/StudentPhotos/no.jpg'"
                    />
                  </div>
                  <div class="content" @click="handClick('签到',index,inde)">
                    <div class="info">
                      <p>{{value.name}}</p>
                      <p style="font-size: 3.3vw; color: #9a9b9d">{{value.number}}</p>
                    </div>
                    <span class="middle" v-for="id in generateNumberArray(time)"  style="color: #9a9b9d">
                      <var-icon v-if="value.rec[id] === 100"  name="check" class="my-icon"/>
                      <var-icon v-else-if="value.rec[id] === 2" name="window-close" class="my-icon"/>
                      <var-icon v-else-if="value.rec[id] === 1" name="radio-blank" size="20px"/>
                      <var-icon style="color: #fdfdfe" v-else class="my-icon" name="plus"/>
                  </span>
                  </div>
                  <div class="option">
                    <van-row>
                      <van-col span="24"><van-button :plain="item.sgin[index]"  color="#2B94EEFF"  @click="handClick('签到',index,inde)"><van-icon name="success" /></van-button></van-col>
                      <van-col span="24"> <van-button :plain="item.leaved[index]"  :color="item.leaved[index] ? '#2B94EEFF' : '#f1c75e'"  @click="handClick('事假', index,inde)">假</van-button></van-col>
                      <van-col span="24"><van-button :plain="item.absent[index]"  :color="item.absent[index] ? '#2B94EEFF' : '#c55350'"  @click="handClick('旷课', index,inde)"><van-icon name="cross" /></van-button></van-col>
                    </van-row>
                  </div>
                </div>
              </van-cell>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {ref} from "vue";
import { Dialog } from 'vant';
import {Toast} from "vant";
import 'vant/lib/index.css'
import {startKldm} from '/@/api/jsdm';
import {stopKldm} from '/@/api/jsdm';
import {getStudents} from '/@/api/jsdm';
import {editAttendanceTime} from '/@/api/jsdm';
import {getAttendanceTimes} from '/@/api/jsdm';
import { useRoute, useRouter} from "vue-router/dist/vue-router";
import {onBeforeRouteLeave} from "vue-router"
import {toReactive} from "@vueuse/core/index";
import {UseGetAttendanceTimesStore} from "../../../../../store/modules/jsdm";
import {getEduUrl} from "/@/api";
export default {
  setup() {
    const getAttendance = UseGetAttendanceTimesStore();
    const time = ref(0);
    const Sub = ref(false)
    const myIcon = reactive([]);
    const Icon = reactive([]);
    const radioVal = ref('1');
    const password = ref(0)
    const count = ref(0);
    const timer = ref(null);
    const dmjl = reactive([]);
    const fid = ref(null);
    const allStudent = ref(null);
    const stuIds = reactive([]);
    const studentAttendance = ref([]);
    const router = useRouter();
    const route = useRoute();
    const tcID = route.query.tcID;
    const index = route.query.index;
    const stuIndex = ref(0);
    const eduUrl=getEduUrl();
    const clic = ref(true);
    const sub = ref(false);
    const cli = ref(false);
    let dmjlList = reactive([]);
    let stuid = reactive([]);
    const tab = reactive({
      studentList: [
        {name: "所有", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "已签", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "请假", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "旷课", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
        {name: "未处理", stuList:[], sgin:[], leaved:[], absent:[],slideOut:[]},
      ],
    });

    onBeforeRouteLeave((to, from, next) => {
      clearInterval(timer.value);
      next();
    })

    const initData = async () => {
      studentList.style.display = "none";
      const pw = await startKldm(tcID)
      console.log(pw.response.value)
      password.value = pw.response.value.password
    };

    const getStu = async () => {
      await getStudents(tcID).then( res => {
        if ( res.response.value.count > -1) {
          count.value = res.response.value.count;
        } else {
          clearInterval(timer.value);
          Dialog.alert({
            title: '警告',
            message: '点名已经停止',
          }).then( () => {
            Sub.value = true;
            router.back();
          });
        }
      }).catch(error => console.log(error));
    };

    //停止点名
    const stopRollCall =  () => {
      clic.value = false;
      Dialog.confirm({
        title: '提示',
        message: '是否停止点名',
        confirmButtonColor: '#2b94ee',
        cancelButtonColor: '#2b94ee',
      }).then(async () => {
        clearInterval(timer.value);
        Sub.value = true;
        await stopKldm(tcID).then( res => {
          if (res.response.value.count > -1) {
            count.value = res.response.value.count;
            Toast("停止成功"+count.value+"人参加点名")
            codeCard.style.display = "none";
            studentList.style.display = "block";
            getAttendanceTime();
            getAttendance.data[index].studentAttendance = resData.response.value.studentAttendance;
            getAttendance.data[index].times = resData.response.value.times;
          } else {
            Toast('停止失败')
          }
        })
            .catch( error => console.log(error));
      });
    };

    const handleInit = (index) =>{
      if(index === 1){
        tab.studentList[1].sgin.push(false);
        tab.studentList[1].leaved.push(true);
        tab.studentList[1].absent.push(true);
      }else if(index === 2)
      {
        tab.studentList[2].sgin.push(true);
        tab.studentList[2].leaved.push(false);
        tab.studentList[2].absent.push(true);
      }
      else if(index === 3)
      {
        tab.studentList[3].sgin.push(true);
        tab.studentList[3].leaved.push(true);
        tab.studentList[3].absent.push(false);
      }
      else if(index === 4)
      {
        tab.studentList[4].sgin.push(true);
        tab.studentList[4].leaved.push(true);
        tab.studentList[4].absent.push(true);
      }
    }

    const getAttendanceTime = async () => {
      await getAttendanceTimes(tcID).then(res => {
        console.log("res---->",res.response.value.times)
        const data = res.response.value;
        studentAttendance.value = data.studentAttendance;
        allStudent.value = data;
        fid.value = data.times[data.times.length-1].id;
        time.value = data.times.length;
        for(let i = 0; i < data.studentAttendance.length; i++)
        {
          dmjl[i] = data.studentAttendance[i].rec[data.times.length- 1];
          stuIds[i] = data.studentAttendance[i].stuID;
          tab.studentList[0].stuList.push(data.studentAttendance[i]);
          if(data.studentAttendance[i].rec[data.times.length - 1] === 100){
            tab.studentList[1].stuList.push(data.studentAttendance[i]);
            handleInit(1);
            tab.studentList[0].sgin.push(false);
            tab.studentList[0].leaved.push(true);
            tab.studentList[0].absent.push(true);
          } else if(data.studentAttendance[i].rec[data.times.length - 1] === 1){
            tab.studentList[2].stuList.push(data.studentAttendance[i]);
            handleInit(2);
            tab.studentList[0].sgin.push(true);
            tab.studentList[0].leaved.push(false);
            tab.studentList[0].absent.push(true);
          }else if(data.studentAttendance[i].rec[data.times.length - 1] === 2){
            tab.studentList[3].stuList.push(data.studentAttendance[i]);
            handleInit(3);
            tab.studentList[0].sgin.push(true);
            tab.studentList[0].leaved.push(true);
            tab.studentList[0].absent.push(false);
          }
          else {
            tab.studentList[4].stuList.push(data.studentAttendance[i]);
            handleInit(4);
            tab.studentList[0].sgin.push(true);
            tab.studentList[0].leaved.push(true);
            tab.studentList[0].absent.push(true);
          }
        }
      }).catch( error => console.log(error));
    }

    const handelSgin =(item,index)=>{
      tab.studentList[item].sgin[index] = false;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = true;
    }

    const handelLeave =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = false;
      tab.studentList[item].absent[index] = true;
    }

    const handelAbsent =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = false;
    }

    const handelInit =(item,index)=>{
      tab.studentList[item].sgin[index] = true;
      tab.studentList[item].leaved[index] = true;
      tab.studentList[item].absent[index] = true;
    }

    // watch(tab.studentList, (newValue, oldValue) => {
    // }, {
    //   deep: true
    // });

    // const handClick = (action, index,item) => {
    //   cli.value = true;
    //   for(let i = 0; i < stuIds.length; i++)
    //   {
    //     if(tab.studentList[item].stuList[index].stuID === stuIds[i])
    //     {
    //       stuIndex.value = i;
    //     }
    //   }
    //   const student = studentAttendance.value[stuIndex.value];
    //   if(tab.studentList[4].stuList.includes(student))
    //   {
    //     tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
    //
    //   }
    //
    //   if (action === "签到") {
    //     dmjl[stuIndex.value] = 100;
    //     handelSgin(0,stuIndex.value);
    //     if(item == 0 ||item == 2||item == 3||item == 4)
    //     {
    //       if (!tab.studentList[1].stuList.includes(student)) {
    //         if(tab.studentList[2].stuList.includes(student)||tab.studentList[3].stuList.includes(student))
    //         {
    //           tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
    //           tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
    //         }
    //         tab.studentList[1].stuList.push(student);
    //         handleInit(1);
    //       }
    //     }
    //   }
    //   else if (action === "事假") {
    //     dmjl[stuIndex.value] = 1;
    //     handelLeave(0,stuIndex.value);
    //     if(item === 0 ||item === 1||item === 3||item === 4)
    //     {
    //       if (!tab.studentList[2].stuList.includes(student))
    //       {
    //         if(tab.studentList[1].stuList.includes(student)||tab.studentList[3].stuList.includes(student))
    //         {
    //           tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
    //           tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
    //         }
    //         tab.studentList[2].stuList.push(student)
    //         handleInit(2);
    //       }
    //     }
    //
    //   }
    //   else if (action === "旷课")
    //   {
    //     dmjl[stuIndex.value] = 2;
    //     handelAbsent(0,stuIndex.value);
    //     if(item === 0 ||item === 1||item === 2||item === 4)
    //     {
    //       if (!tab.studentList[3].stuList.includes(student)) {
    //         if(tab.studentList[2].stuList.includes(student)||tab.studentList[1].stuList.includes(student))
    //         {
    //           tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
    //           tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
    //         }
    //         tab.studentList[3].stuList.push(student)
    //         handleInit(3);
    //       }
    //     }
    //   }
    // };

    const handClick = (action, index, item) => {
      clic.value = false;
      for(let i = 0; i < stuIds.length; i++)
      {
        if(tab.studentList[item].stuList[index].stuID === stuIds[i])
        {
          stuIndex.value = i;
        }
      }
      const student = studentAttendance.value[stuIndex.value]
      if (action === "签到") {
        dmjl[stuIndex.value] = 100;
        handelSgin(0,stuIndex.value);
        if(item == 0 ||item == 2||item == 3||item == 4)
        {
          if (!tab.studentList[1].stuList.includes(student)) {
            if(tab.studentList[2].stuList.includes(student) && item !== 0) {
              handelSgin(2,index)
              // clickedCell.$el.classList.add('slideOut');
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[item].slideOut[index] = false;
                tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
                handelLeave(2,index)
              },1000)

            }
            else if(tab.studentList[3].stuList.includes(student) && item !== 0)
            {
              handelSgin(3,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[item].slideOut[index] = false;
                tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
                handelAbsent(3,index)
                // clickedCell.$el.classList.remove('slideOut')
              },1000)

            }
            else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelSgin(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }

            tab.studentList[1].stuList.push(student);
            tab.studentList[1].sgin.push(false);
            tab.studentList[1].leaved.push(true);
            tab.studentList[1].absent.push(true);
          }
        }
      }
      else if (action === "事假") {
        dmjl[stuIndex.value] = 1;
        handelLeave(0,stuIndex.value);

        if(item === 0 ||item === 1||item === 3||item === 4)
        {
          if (!tab.studentList[2].stuList.includes(student))
          {
            if(tab.studentList[1].stuList.includes(student) && item !== 0) {
              handelLeave(1,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
                handelSgin(1,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }
            if(tab.studentList[3].stuList.includes(student) && item !== 0)
            {
              handelLeave(3,index)
              tab.studentList[item].slideOut[index] = true;

              setTimeout(()=>{
                tab.studentList[3].stuList = tab.studentList[3].stuList.filter((stu) => stu !== student);
                handelAbsent(3,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelLeave(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }
            tab.studentList[2].stuList.push(student)
            tab.studentList[2].sgin.push(true)
            tab.studentList[2].leaved.push(false)
            tab.studentList[2].absent.push(true)
          }
        }
      }
      else if (action === "旷课")
      {
        dmjl[stuIndex.value] = 2;
        handelAbsent(0,stuIndex.value);

        if(item === 0 ||item === 1||item === 2||item === 4)
        {
          if (!tab.studentList[3].stuList.includes(student)) {
            if(tab.studentList[1].stuList.includes(student) && item !== 0) {
              handelAbsent(1,index)
              tab.studentList[item].slideOut[index] = true;
              setTimeout(()=>{
                tab.studentList[1].stuList = tab.studentList[1].stuList.filter((stu) => stu !== student);
                handelSgin(1,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }
            if(tab.studentList[2].stuList.includes(student) && item !== 0)
            {
              handelAbsent(2,index)
              tab.studentList[item].slideOut[index] = true;

              setTimeout(()=>{
                tab.studentList[2].stuList = tab.studentList[2].stuList.filter((stu) => stu !== student);
                handelLeave(2,index)
                tab.studentList[item].slideOut[index] = false;

              },1000)

            }else if(tab.studentList[4].stuList.includes(student))
            {
              if(item === 0)
              {
                tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
              }
              else if(item === 4)
              {
                handelAbsent(4,index)
                tab.studentList[item].slideOut[index] = true;
                setTimeout(()=>{
                  tab.studentList[item].slideOut[index] = false;
                  tab.studentList[4].stuList = tab.studentList[4].stuList.filter((stu) => stu !== student);
                  handelInit(4,index)
                  // clickedCell.$el.classList.remove('slideOut')
                },1000)
              }
            }
            tab.studentList[3].stuList.push(student)
            tab.studentList[3].sgin.push(true)
            tab.studentList[3].leaved.push(true)
            tab.studentList[3].absent.push(false)
          }
        }
      }
    };

    const handleSubButtonClick = () =>{
      sub.value = true;
      Dialog.confirm({
        title: '提示',
        message: '是否提交点名信息',
        confirmButtonColor : '#007aff',
        cancelButtonColor: '#007aff',
      }).then( async () => {
        for(let i = 0; i < studentAttendance.value.length; i++)
        {
          if(dmjl[i] == 0)
          {
            stuIds[i] = 0;
          }
        }
        dmjlList = dmjl.filter(item => item !== 0)
        stuid = stuIds.filter(item => item !== 0)
       await editAttendanceTime(tcID, JSON.stringify(dmjlList), fid.value,JSON.stringify(stuid),'old',0)
           .then( async (res) => {
             if (res.response.value.state) {
               const resData = await getAttendanceTimes(tcID)
               console.log(resData.response.value.times)
               getAttendance.data[index].studentAttendance = resData.response.value.studentAttendance;
               getAttendance.data[index].times = resData.response.value.times;
               router.back();
               Toast(res.response.value.msg)
             }
           });
      }).catch( error => {
      console.error(error);
      });
    }

    onBeforeRouteLeave(async (to, from, next)=>{
     if(cli.value)
     {
       for(let i = 0; i < studentAttendance.value.length; i++)
       {
         if(dmjl[i] == 0)
         {
           stuIds[i] = 0;
         }
       }
       dmjlList = dmjl.filter(item => item !== 0)
       stuid = stuIds.filter(item => item !== 0)
       await editAttendanceTime(tcID, JSON.stringify(dmjlList), fid.value,JSON.stringify(stuid),'old',0)
           .then( async (res) => {
             if (res.response.value.state) {
               const resData = await getAttendanceTimes(tcID)
               console.log(resData.response.value.times)
               getAttendance.data[index].studentAttendance = resData.response.value.studentAttendance;
               getAttendance.data[index].times = resData.response.value.times;
               next();

             }
           });
     }else{
       const resData = await getAttendanceTimes(tcID)
       console.log(resData.response.value.times)
       getAttendance.data[index].studentAttendance = resData.response.value.studentAttendance;
       getAttendance.data[index].times = resData.response.value.times;
       next();
     }

    })

    const generateNumberArray = (length) =>{
      return Array.from({ length }, (_, index) => index);
    }

    onMounted(() => {
      initData();
      timer.value = setInterval(getStu, 800);
    });

    return {
      time,
      generateNumberArray,
      studentAttendance,
      radioVal,
      password,
      count,
      stopRollCall,
      handleSubButtonClick,
      timer,
      Sub,
      myIcon,
      eduUrl,
      active:0,
      handClick,
      ...toReactive(tab),
      Icon

    }
  }
}

</script>

<style scoped lang="less">

.slideOut {
  animation: slideOutAnimation 1s;
}

@keyframes slideOutAnimation {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/deep/.van-cell{
  padding: 3vw;
  .img{
    width: 20vw;
    height: 25vw;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 0.5vw;
    margin-right: 5vw;
  }

  .van-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .middel{
    width: 10px;
    margin: 0;
    padding: 0;
  }

  .my-icon{
    margin: 0;
    padding: 0;
    display: inline-block;
  }

  .text {
    display: flex;
  }

  .van-button{
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
    margin-bottom: 1.5vw;
  }
  .content {
    width: 45vw;
    display: block;
    flex-direction: column;
  }

  .van-row {
    display: block;
    flex-direction: column;
    width: 20vw;
    height: 25vw;
    padding-left: 6vw;
    padding-top: 1vw;
  }
}

.info {
  padding-top: 20px;
  font-size: 4.5vw;
  margin: 0;
}

/deep/.van-tabs{
  .van-tabs__line{
    width: 20%;
    background-color: #2b95ef;
  }
  .van-tab--active{
    color: #2b95ef;
  }

  .van-tabs__wrap {
    position: sticky;
    top: 12vw;
    z-index: 100;
  }

}

p {
  margin-top: 10px;
  color: rgb(74, 75, 77);
}


.container{
  font-family: 'Helvetica Neue',Helvetica,sans-serif;
  line-height: 21px;
  color: #141414;
  background-color: #f4f4f6;
  margin: 0;
  display: block;
}

.card {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  margin: 10px;
  border-radius: 2px;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.card-header,.card-footer{
  height: 80px;
  font-size: 32px;
  border-radius: 2px 2px 0 0;
  position: relative;
  display: flex;
  min-height: 44px;
  padding: 10px 15px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

.card-header:after {
  top: auto;
  bottom: 0;
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  transform: scaleY(.5);
  background-color: #c8c7cc;
}
.card-link{
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.card-footer:before{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  transform: scaleY(.5);
  background-color: #c8c7cc;
}

.cardBody {
  color: #8f8f94;
  height: 250px;
  font-family: 宋体;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

#password{
  font-size: 100px;
  color: #10aeff;
}

.card-content {
  height: 500px;
  font-size: 14px;
  position: relative;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body, #app {
  height: 100%!important;
  //background-color: inherit;
  background: linear-gradient(to top, #f6f6f7, #2b94ee);
}
</style>
